<template>
  <h3>state</h3>
  <div>这是child1组件</div>
  <div>count: {{ num }} - <button @click="fn">++</button></div>
  <div>name: {{ name }}</div>
  <div>sex: {{ sex }}</div>
  <div>likes: {{ likes }}</div>
  <div>doubleNum: {{ doubleNum }}</div>
</template>

<script>
// mapState是一个辅助函数
// 将仓库的state的值映射到组件的计算属性里面
import { mapState } from "vuex";

export default {
  data() {
    return {
      like: "健身",
      num2: 2,
    };
  },
  // 仓库数据不能使用data来接受，会导致响应式失效
  // data() {
  //   return {
  //     count: this.$store.state.count,
  //   };
  // },

  // 仓库的数据必须使用计算属性去获取
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   sex() {
  //     return this.$store.state.sex;
  //   },
  //   likes() {
  //     return this.$store.state.likes;
  //   },
  // },

  // mapState的数组写法
  // computed: mapState(["count", "name", "sex", "likes"]),

  // mapState的对象写法
  computed: {
    ...mapState({
      // 重命名
      num: "count",
      // 函数写法用于做数据的改造
      name: (state) => "亲爱的" + state.name,
      sex: (state) => {
        return state.sex === 1 ? "男" : "女";
      },
      // 如果需要用到this，要把箭头函数转成普通函数
      likes(state) {
        return state.likes.concat(this.like);
      },
    }),
    doubleNum() {
      return this.num2 * 2;
    },
  },

  // computed: {
  //   doubleNum() {
  //     return this.num2 * 2;
  //   },
  // },

  mounted() {
    // 可以通过this.$store.state.xxx来获取仓库数据
    console.log(this.$store.state.count);
  },
  methods: {
    fn() {
      // 直接修改是不符合规范
      // this.$store.state.count++;
      this.$store.commit("increment");
    },
  },
};
</script>
